<!--
************
本人信息填写
************
-->
<template>
  <van-cell-group>
    <van-field @blur="checkAndLogin" label="姓名" :disabled="holderDisabled" v-model="policyholder.name" clearable placeholder="请输入姓名" />
    
    <mx-action-sheet
      label="证件类型"
      placeholder="请选择证件类型"
      :holderDisabled="holderDisabled"
      :cardType="cardType"
      v-model="policyholder.idType"
    />
    
    <van-field label="证件号" @blur="checkAndLogin" :disabled="holderDisabled"  v-model="policyholder.idNumber" clearable placeholder="请输入证件号" />
    
    <mx-datetime-picker
      v-show="policyholder.idType && policyholder.idType != '1'"
      label="出生日期"
      placeholder="请选择出生日期"
      :holderDisabled="holderDisabled"
      v-model="policyholder.birthday"
    />
    <mx-action-sheet
      v-show="policyholder.idType && policyholder.idType != '1'" 
      label="性别"
      placeholder="请选择性别"
      :holderDisabled="holderDisabled"
      :cardType="sexList"
      v-model="policyholder.sex"
    />

    <van-field label="手机号" @blur="checkAndLogin" :disabled="holderDisabled" v-model="policyholder.phoneNo" clearable placeholder="请输入手机号" />
    <van-field label="短信验证码" @blur="checkAndLogin" v-show="!holderDisabled" clearable v-model="policyholder.smsCode" placeholder="请输入短信验证码" >
      <template #button>
        <van-button @click="getSmsCode()" :disabled="smsDisable" style="margin-top:-4px" size="small" type="default" class="fontColor">{{smsContent}}</van-button>
      </template>
    </van-field>
    
  </van-cell-group>
</template>
<script lang="ts">
import { watchEffect,watch,reactive,computed, toRefs,ref,onMounted,defineComponent } from 'vue';
import { Toast,Dialog } from 'vant';
import {Resource} from '@/services/resource';
import { formatDate,checkInfoTel,checkInfoName,verIdCard,checkInfoCard,userAge } from '@/utils/utils';
import { useStore } from 'vuex'

export default defineComponent({
  name: 'info',
  props: {
    policyholderData: {
      type: Object,
      default:{
        name: "",//姓名
        idType: "1",//1身份证  2护照 6港澳台回乡证
        idNumber: "",//证件号
        birthday: "",//生日
        sex: "",//性别
        phoneNo: "",//手机号
        smsCode: "",//验证码
      }
    },
  },
  components: {
    
  },
  emits: ["policyholderData"],
  setup(props, ctx){
    const store = useStore()
    interface CardType{
      dataCode: string;
      name: string;
      value: string;
    }
    interface Item{
      name: string;
      value: string;
    }
    const cardType: [CardType]=[
      {
        dataCode: "",
        name: "",
        value: ""
      }
    ];

    // 数据双向绑定
    const state=reactive({
      policyholder:props.policyholderData,
      cardType:cardType,
      
      smsDisable: false,//短信按钮是否可点击
      smsContent:"发送验证码",
      holderDisabled: false,//true信息已绑定  false 未绑定 信息绑定按钮能否点击
      readonly:false,//投保人信息输入
      
      timeShow:false,//出生日期时间插件显示
      showSex:false,//是否展示性别类型选择
      sexList:[],//性别类型数据
    })


    // 绑定缴费人信息
    const login=()=>{
      if(!state.policyholder.name || !state.policyholder.idType || !state.policyholder.idNumber || !state.policyholder.phoneNo || !state.policyholder.smsCode){
        Toast("请将信息填写完整");
        return;
      }
      if(!checkInfoName(state.policyholder.name)){
        Toast("请输入正确的姓名");
        return;
      }
      if (state.policyholder.idType == "1" && !verIdCard(state.policyholder.idNumber)) {
        Toast("请输入正确的身份证号");
        return;
      }
      if (state.policyholder.idType != "1" && (!state.policyholder.sex || !state.policyholder.birthday)) {
        Toast("请将信息填写完整");
        return;
      }
      if (state.policyholder.idType != "1" && !checkInfoCard(state.policyholder.idType,state.policyholder.idNumber)) {
        Toast("请输入正确的证件号");
        return;
      }
      if (state.policyholder.idType != "1" && userAge(state.policyholder.birthday) < 18) {
        Toast("用户未成年，请重新填写");
        return;
      }
      if (!checkInfoTel(state.policyholder.phoneNo)) {
        Toast("请输入正确的手机号");
        return;
      }
      if (!/^[0-9]*$/.test(state.policyholder.smsCode)) {
        Toast("请输入正确的验证码");
        return;
      }
      Dialog.confirm({
        title: "温馨提示", //加上标题
        message: "请确认您填写的缴费人信息<br />是否正确，一旦确定将不可修改。", //改变弹出框的内容
      })
      .then(() => { //点击确认按钮后的调用
          Resource.auth.post({},{
          name:state.policyholder.name, 
          idType:state.policyholder.idType,
          idNum:state.policyholder.idNumber,
          birthday:state.policyholder.birthday,
          sex:state.policyholder.sex,
          phoneNo:state.policyholder.phoneNo,
          smsCode:state.policyholder.smsCode
        }).then(res=>{
          
          if(res.success==true){
            state.holderDisabled = true;
            state.readonly = true;
            
            Toast("验证成功");
          }else{
            Toast(res.message);
            state.holderDisabled = false
          }
        
        }).catch(error=>{
          console.log(error)
          state.holderDisabled = false
        })
      })
    }
    // input输入框事件
    const methodsInputFun=reactive({
      // 检验信息填写完整后调用绑定接口
      checkAndLogin:()=>{
        console.log("***checkAndLogin***")
        if (
          state.policyholder.idNumber &&
          state.policyholder.phoneNo &&
          state.policyholder.smsCode &&
          (state.policyholder.idType == '1' ||
          (
            state.policyholder.idType != '1' &&
            state.policyholder.birthday &&
            state.policyholder.sex
          )
          )
        ) {
          login()
        }
      }
    })
    
    // 证件类型，性别赋值
    state.sexList=store.getters.sexList
    state.cardType=store.getters.cardType

    watchEffect(()=>{
      state.cardType=store.state.cardType
    })
    
    watch([state.policyholder],(newValues, prevValues)=>{
      ctx.emit("policyholderData",state.policyholder)
    })
    let _policyholder=state.policyholder
    const plusOne = computed(() => {
      
       return state.policyholder.name
    })
    
    // 发送短信
    const getSmsCode=()=>{
      if (!state.policyholder.phoneNo) {
        Toast('请先输入手机号');
      } else if (!checkInfoTel(state.policyholder.phoneNo)) {
        Toast("请输入正确的手机号");
      }else{
        state.smsDisable = true;
        const _phoneNo=state.policyholder.phoneNo.replace(/[ ]/g, "");
        Resource.sms.post({},{
          phoneNo:_phoneNo
        }).then(res=>{
          if(res.success==true){
            Toast("短信已发送");
            let time = 60;
            let sendTimer = setInterval(function () {
              time--;
              state.smsContent = time + "s重新发送";
              if (time <= 0) {
                clearInterval(sendTimer);
                state.smsContent = "获取验证码";
                state.smsDisable = false;
              }
            }, 1000);
          }else{
            Toast(res.message);
          }
        
        }).catch(error=>{
          console.log(error)
        })
      }
    }

    // 查询用户信息
    const profile=()=>{
      Resource.profile.post({},{}).then(res=>{
        if(res.success==true){
          if(res.result){
            state.policyholder.name = res.result.name;
            state.policyholder.idType = res.result.idType;
            state.policyholder.idNumber = res.result.idNum;
            state.policyholder.birthday = res.result.birthday.split(" ")[0];
            state.policyholder.sex = res.result.sex;
            state.policyholder.phoneNo = res.result.phoneNo;
            
            state.holderDisabled = true;
          }
        }else{
          // Toast(res.message);
        }
        
      }).catch(error=>{
        console.log(error)
      })
    }
    profile()

    return {
      ...toRefs(state),
      
      getSmsCode,
      ...toRefs(methodsInputFun),
    }
  }
})


</script>